<template>

	<div>
		<u-subsection :list="list" mode="subsection" :current="subsectionIndex"
			@change="changeSubsection"></u-subsection>

		<div class="content">
			<div class="button-list">
				<div class="button" :class="{'active-button':true}"> 待应答 （{{number}}）</div>
				<div class="button"> 已完成 （{{number}}）</div>
			</div>

			<div class="body">
				<div>我向龚漫奇咨询</div>
				<div>老师，我不太理解为什么求极限的时候也可以用拉格朗日。因为我刚学拉格朗日，我的理...</div>
			</div>

			<div class="time-finish">{{ hours }}小时后结束</div>

			<div class="type-wrap">
				咨询服务【图文咨询】
			</div>

			<div class="button-wrap">
				<u-button class="btn-cancel" type="primary" text="取消"></u-button>
			</div>


		</div>
	</div>



</template>

<script>
	export default {
		data() {
			return {
				list: ['待解答', '进行中', '已完成'],
				subsectionIndex: 1,
				number: 1,
				hours: 47
			}
		},
		methods: {
			changeSubsection(index) {
				console.log(index);
				this.subsectionIndex = index;
			}
		}
	}
</script>


<style lang="scss">
	.content{
		padding: 0 10px;
		position: relative;
	}
	.button-list {
		display: flex;
		// padding: 10px;

		.button {
			padding: 5px;
			border: 6px;
			font-size: 14px;
			border-radius: 6px;
		}

		.active-button {
			// color: #8DB3F5;
			// background-color: #F1F4FD;
			color: #fff;
			background-color: #1890ff;
		}
	}
.body{
	margin:10px 0;
}
.time-finish{
	font-size: 14px;
	color: #ccc;
}
.type-wrap{
	font-size: 14px;
	    background: #ccc;
	    padding: 6px;
	    color: #969292;
}
.button-wrap{
	    position: absolute;
	    bottom: 0;
	    right: 26px;
	.btn-cancel{
		width: 100px;
	}
}
</style>